import React, { useEffect, useState } from 'react';
import { connect } from 'dva';
import { Radio } from 'antd';
import CustomDatePicker from '@/components/CustomDatePicker';
import PieChart from './components/PieChart';
import BarChart from './components/BarChart';
import Loading from '@/components/Loading';
import style from '@/pages/IndexPage.css';

function CostTrend({ dispatch, user, fields, cost }){
    const { theme, authorized } = user;
    const { allFields, currentEnergy, energyTypes } = fields;
    const { costTrend, isLoading  } = cost;
    const [dataType, setDataType] = useState('energy');
    let text = dataType === 'energy' ? '能耗' : '成本';
    useEffect(()=>{
        if ( authorized ) {
            new Promise((resolve, reject)=>{
                dispatch({ type:'fields/setEnergyType', payload:1 });
                dispatch({ type:'fields/fetchField', payload:{ resolve, reject }})
            })
            .then(()=>{
                dispatch({ type:'cost/fetchCostTrend'});
            })
        }
    },[authorized]);
    // console.log(allFields);
    return (
        <div className={style['page-container']}>
            { isLoading && <Loading /> }
            <div style={{ height:'40px', display:'flex' }}>
                <Radio.Group className={style['custom-radio']} value={currentEnergy} style={{ marginRight:'1rem' }} onChange={e=>{
                    dispatch({ type:'fields/setEnergyType', payload:e.target.value });
                    dispatch({ type:'cost/fetchCostTrend'});
                }}>
                    {
                        allFields.map((item, index)=>(
                            <Radio.Button key={item.energyType} value={item.energyType} >{ item.typeName }</Radio.Button>
                        ))
                    }
                </Radio.Group>
               
                <Radio.Group value={dataType} className={style['custom-radio']} style={{ marginRight:'1rem' }} onChange={e=>setDataType(e.target.value)}>
                    <Radio.Button value='energy'>能耗</Radio.Button>
                    <Radio.Button value='cost'>成本</Radio.Button>
                </Radio.Group>
                <CustomDatePicker onDispatch={()=>dispatch({ type:'cost/fetchCostTrend'})} />
            </div>
            <div style={{ height:'calc( 100% - 40px)'}}>
                {/* <div className={style['card-container-wrapper']} style={{ width:'20%', paddingBottom:'0' }}>
                    <div className={style['card-container']}>
                    </div>
                </div> */}
                <div className={style['card-container-wrapper']} style={{ width:'100%', paddingRight:'0', paddingBottom:'0' }}>
                    <div style={{ height:'36%' }}>
                        <div className={style['card-container-wrapper']} style={{ width:'50%' }}>
                            <div className={style['card-container']}>
                                <PieChart title={`时段${text}占比`} dataType={dataType} energyInfo={energyTypes[currentEnergy] || {}} />
                            </div>
                        </div>
                        <div className={style['card-container-wrapper']} style={{ width:'50%', paddingRight:'0' }}>
                            <div className={style['card-container']}>
                                <PieChart title={`制冷站${text}占比`} data={costTrend.acResultList || []} dataType={dataType} energyInfo={energyTypes[currentEnergy] || {}}  />
                            </div>
                        </div>
                    </div>
                    <div className={style['card-container']} style={{ height:'64%' }}>
                        <BarChart title={`${text}趋势`} data={costTrend.resultList || {}} dataType={dataType} energyInfo={energyTypes[currentEnergy] || {}} />
                    </div>

                </div>
            </div>
        </div>
    )
}

export default connect(({ user, fields, cost })=>({ user, fields, cost }))(CostTrend);